<template>
  <el-container class="restaurant-container">
    <el-card class="box-card" shadow="hover">
      <!-- 餐厅图片 -->
      <img
          :src="restaurant.image"
          alt="Restaurant Image"
          class="restaurant-image"
          @error="handleImageError"
      />
      <h2>{{ restaurant.name }}</h2>
      <el-rate :value="restaurant.rating" disabled />
      <p>{{ restaurant.description }}</p>

      <el-divider>菜品列表</el-divider>

      <!-- 菜品列表 -->
      <el-table :data="restaurant.dishes" style="width: 100%">
        <el-table-column prop="name" label="菜品名称" />
        <el-table-column prop="price" label="价格" />
        <el-table-column prop="image" label="图片">
          <template v-slot="scope">
            <img
                :src="scope.row.image"
                alt="Dish Image"
                class="dish-image"
                @error="handleImageError"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      restaurant: {
        name: '餐厅',
        image: 'https://via.placeholder.com/800x300', // 确保这是有效的图片链接
        rating: 4.5,
        description: '这是一家非常受欢迎的餐厅，提供各种美味的菜肴。',
        dishes: [
          { name: '红烧肉', price: '38元', image: 'https://via.placeholder.com/50' },
          { name: '宫保鸡丁', price: '28元', image: 'https://via.placeholder.com/50' },
          { name: '麻辣火锅', price: '88元', image: 'https://via.placeholder.com/50' }
        ]
      }
    }
  },
  methods: {
    handleImageError(event) {
      event.target.src = 'https://via.placeholder.com/150'; // 使用占位图
      event.target.style.opacity = 0.5; // 减弱透明度，暗示这是一个替代图片
      event.target.alt = "图片加载失败"; // 更新alt文本
    }
  }
}
</script>

<style scoped>
.restaurant-container {
  padding: 20px;
}

.restaurant-image, .dish-image {
  object-fit: cover;
}

.restaurant-image {
  width: 100%;
  height: 300px;
}

.dish-image {
  width: 50px;
  height: 50px;
}
</style>